@extends('pc_admin.app')
@section('content')
    <link rel="stylesheet" href="/addons/icheck-1.x/skins/square/green.css">
    <link rel="stylesheet" href="/css/admin/mobileSelect.css">
    <link rel="stylesheet" href="/css/pc-system/attendance-left.css">
    <link rel="stylesheet" href="/css/pc-system/performance-setting.css?v=2019060401">
    <div class="mian-container">
        <div class="container-section performance-setting clearfloat">
            <div class="f-left left-section">
                <div class="title-list top-list">
                    <h3 class="h3-title"><i class="icon iconfont icon-biaoqian"></i>管理标签</h3>
                    <div class="hidden-tag">
                        <div class="tip-con">
                            <ul class="tip-list">
                                @foreach($tips as $key=>$val)
                                    <li style="background: {{$val->color}}"><span></span>{{$val->name}}<i class="icon iconfont icon-chahao" id="{{$val->id}}"></i></li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="tips-div">
                            <a class="tip-btn"><i class="icon iconfont icon-jiahao"></i>创建新标签</a>
                        </div>
                    </div>
                </div>
                {{--<div class="title-list top-list">--}}
                    <h3 class="time-h3"><i class="icon iconfont icon-rili"></i>选择时间<span class="span-time" id="trigger3">{{$year}}-{{$month}}</span></h3>
                {{--</div>--}}
                @foreach($tongxunlu as $t)
                    <div class="section-list">
                        <div class="title-list" id="{{$t['id']}}">
                            <h3 class="h3-title">
                                @if($t['group_name'] != '我的同事')
                                    <img class="list-user" src="/img/list-user1.png" style="vertical-align: middle; width: 18px;  height: 18px;">
                                @endif{{$t['group_name']}}
                            </h3>
                            <span class="num-span"></span>
                        </div>
                        <ul>
                            @foreach($t['member'] as $m)
                                <li>
                                    <div class="li-list">
                                        <div class="list-btn">
                                            <img class="sec-img" src="{{userlogo($m->id)}}">
                                            <span class="sec-name">{{$m['qw_name']}}</span>
                                            <i class="cir-angle"></i>
                                            @foreach($m->role as $mr)
                                            <span class="circle-span @if($mr==10) span-score @elseif($mr==11) span-exam @elseif($mr==12) span-reward @endif">{{$roleArray[$mr]}}</span>
                                            @endforeach
                                        </div>
                                        <div class="hidden-div" style="font-family:'黑体'">
                                            <h3 class="weui-flex__item create-item" ><i class="icon iconfont icon-hao"></i>创建项目</h3>
                                            <input type="hidden" value="{{$m->id}}" class="user_id">
                                            @foreach($m->achievement as $value2)
                                            <div class="childern-div change-div" data-id="{{$value2->id}}">
                                                <div class="standard-p">
                                                    <p>项目名</p>
                                                    <input type="text"  class="name" value="{{$value2->name}}" disabled>
                                                </div>
                                                <div class="standard-p">
                                                    <p>标签：</p>
                                                    <input type="text"  class="name" value="{{$value2->tip_id && $value2->tip->name?$value2->tip->name:"无"}}" disabled>
                                                </div>
                                                <div class="standard-p">
                                                    <p>标准值</p>
                                                    <input type="tel"  class="standard" value="{{$value2->standard}}">
                                                </div>
                                                <div class="standard-p" >
                                                    <p>完成值</p>
                                                    <input type="tel" class="score" value="{{$value2->score}}"  class="score">
                                                </div>
                                                <div class="button-g">
                                                    <button class="button-shanchu3">删除</button>
                                                    <button class="button-queding">修改</button>
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                        @if(isset($t['child']))
                            @foreach($t['child'] as $c)
                                <div class="second-list">
                                    <div class="title-list" id="{{$c['id']}}">
                                        <h3 class="h3-title"><img class="list-user" src="/img/list-user1.png" style="vertical-align: middle; width: 18px;  height: 18px;"> {{$c['group_name']}}</h3>
                                        <span class="num-span"></span>
                                    </div>
                                    <ul>
                                        @foreach($c['member'] as $cm)
                                            <li>
                                                <div class="li-list">
                                                    <div class="list-btn">
                                                        <img class="sec-img" src="{{userlogo($cm->id)}}">
                                                        <span class="sec-name">{{$cm['qw_name']}}</span>
                                                        @if($cm['is_leader'] == 1)<i class="icon iconfont icon-qizi"></i>@endif
                                                        <i class="cir-angle"></i>
                                                        @foreach($cm->role as $mr)
                                                        <span class="circle-span @if($mr==10) span-score @elseif($mr==11) span-exam @elseif($mr==12) span-reward @endif">{{$roleArray[$mr]}}</span>
                                                        @endforeach
                                                    </div>
                                                    <div class="hidden-div" style="font-family:'黑体'">
                                                        <h3 class="weui-flex__item create-item" ><i class="icon iconfont icon-hao"></i>创建项目</h3>
                                                        <input type="hidden" value="{{$cm->id}}" class="user_id">
                                                        @foreach($cm->achievement as $value2)
                                                        <div class="childern-div change-div" data-id="{{$value2->id}}">
                                                            <div class="standard-p">
                                                                <p>项目名</p>
                                                                <input type="text"  class="name" value="{{$value2->name}}" disabled>
                                                            </div>
                                                            <div class="standard-p">
                                                                <p>标签：</p>
                                                                <input type="text"  class="name" value="{{$value2->tip_id && $value2->tip->name?$value2->tip->name:"无"}}" disabled>
                                                            </div>
                                                            <div class="standard-p">
                                                                <p>标准值</p>
                                                                <input type="tel"  class="standard" value="{{$value2->standard}}">
                                                            </div>
                                                            <div class="standard-p" >
                                                                <p>完成值</p>
                                                                <input type="tel" class="score" value="{{$value2->score}}"  class="score">
                                                            </div>
                                                            <div class="button-g">
                                                                <button class="button-shanchu3">删除</button>
                                                                <button class="button-queding">修改</button>
                                                            </div>
                                                        </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </li>
                                        @endforeach
                                    </ul>
                                    @foreach($c['child'] as $cc)
                                        <div class="third-list">
                                            <div class="title-list" id="{{$cc['id']}}">
                                                <h3 class="h3-title"><img class="list-user" src="/img/list-user1.png" style="vertical-align: middle; width: 18px;  height: 18px;"> {{$cc['group_name']}}</h3>
                                                <span class="num-span"></span>
                                            </div>
                                            <ul>
                                                @foreach($cc['member'] as $ccm)
                                                    <li>
                                                        <div class="li-list">
                                                            <div class="list-btn">
                                                                <img class="sec-img" src="{{userlogo($ccm->id)}}">
                                                                <span class="sec-name">{{$ccm['qw_name']}}</span>
                                                                @if($ccm['is_leader'] == 1)<i class="icon iconfont icon-qizi"></i>@endif
                                                                <i class="cir-angle"></i>
                                                                @foreach($ccm->role as $ccmr)
                                                                <span class="circle-span @if($ccmr==10) span-score @elseif($mr==11) span-exam @elseif($ccmr==12) span-reward @endif">{{$roleArray[$ccmr]}}</span>
                                                                @endforeach
                                                            </div>
                                                            <div class="hidden-div" style="font-family:'黑体'">
                                                                <h3 class="weui-flex__item create-item" ><i class="icon iconfont icon-hao"></i>创建项目</h3>
                                                                <input type="hidden" value="{{$ccm->id}}" class="user_id">
                                                                @foreach($ccm->achievement as $value2)
                                                                <div class="childern-div change-div" data-id="{{$value2->id}}">
                                                                    <div class="standard-p">
                                                                        <p>项目名</p>
                                                                        <input type="text"  class="name" value="{{$value2->name}}" disabled>
                                                                    </div>
                                                                    <div class="standard-p">
                                                                        <p>标签：</p>
                                                                        <input type="text"  class="name" value="{{$value2->tip_id && $value2->tip->name?$value2->tip->name:"无"}}" disabled>
                                                                    </div>
                                                                    <div class="standard-p">
                                                                        <p>标准值</p>
                                                                        <input type="tel"  class="standard" value="{{$value2->standard}}">
                                                                    </div>
                                                                    <div class="standard-p" >
                                                                        <p>完成值</p>
                                                                        <input type="tel" class="score" value="{{$value2->score}}"  class="score">
                                                                    </div>
                                                                    <div class="button-g">
                                                                        <button class="button-shanchu3">删除</button>
                                                                        <button class="button-queding">修改</button>
                                                                    </div>
                                                                </div>
                                                                @endforeach
                                                            </div>
                                                        </div>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endforeach
                                </div>
                            @endforeach
                        @endif
                    </div>
                @endforeach
            </div>
            <div class="right-section center-list">
            </div>
        </div>
    </div>
    <div class="shadow-hidden"></div>
    <div class="hidden-sec">
        <div class="popup"><h3>创建标签</h3><i class="icon iconfont weui-icon-cancel icon-chahao"></i></div>
        <p>请为新标签输入名称</p>
        <input type="text" value="" name="pro-name" class="input text-input">
        <a class="sub-mit modi-nickname" href="javascript:void(0);">保存</a>
    </div>
    <select class="title-name" style="display: none;">
        <option value="0">无</option>
        @foreach( $tips as $k =>$v)
            <option value="{{$v->id}}">{{$v->name}}</option>
        @endforeach
    </select>
    <script src="/addons/icheck-1.x/icheck.min.js"></script>
    <script src="/js/mobileSelect.js"></script>
    <script>
        $(document).ready(function () {
            if($('.left-section').height()<$('.right-section').height()){
                $('.left-section').css('min-height',$('.right-section').height())
            }else{
                $('.right-section').css('min-height',$('.left-section').height());
            }
            var time ='{{$start}}';
            var UplinkData = [
                {
                    id: '2018',
                    value: '2018年',
                    childs: [
                        {id: '1', value: '1月'},
                        {id: '2', value: '2月'},
                        {id: '3', value: '3月'},
                        {id: '4', value: '4月'},
                        {id: '5', value: '5月'},
                        {id: '6', value: '6月'},
                        {id: '7', value: '7月'},
                        {id: '8', value: '8月'},
                        {id: '9', value: '9月'},
                        {id: '10', value: '10月'},
                        {id: '11', value: '11月'},
                        {id: '12', value: '12月'}
                    ]
                },
                {
                    id: '2019',
                    value: '2019年',
                    childs: [
                        {id: '1', value: '1月'},
                        {id: '2', value: '2月'},
                        {id: '3', value: '3月'},
                        {id: '4', value: '4月'},
                        {id: '5', value: '5月'},
                        {id: '6', value: '6月'},
                        {id: '7', value: '7月'},
                        {id: '8', value: '8月'},
                        {id: '9', value: '9月'},
                        {id: '10', value: '10月'},
                        {id: '11', value: '11月'},
                        {id: '12', value: '12月'}
                    ]
                },
                {
                    id: '2020',
                    value: '2020年',
                    childs: [
                        {id: '1', value: '1月'},
                        {id: '2', value: '2月'},
                        {id: '3', value: '3月'},
                        {id: '4', value: '4月'},
                        {id: '5', value: '5月'},
                        {id: '6', value: '6月'},
                        {id: '7', value: '7月'},
                        {id: '8', value: '8月'},
                        {id: '9', value: '9月'},
                        {id: '10', value: '10月'},
                        {id: '11', value: '11月'},
                        {id: '12', value: '12月'}
                    ]
                }
            ]
            var mobileSelect3 = new MobileSelect({
                trigger: '#trigger3',
                title: '选择时间',
                wheels: [
                    {data: UplinkData}
                ],
                //     keyMap: {
                //        id:'id',
                //        value: 'name',
                //        childs :'son'
                //      },
                position: [0, 1],
                callback: function (indexArr, data) {
                    //
                    var year = data[0].id;
                    var month = data[1].id;

                    window.location.href = '/admin/achievement?year=' + year + '&month=' + month;
                    console.log(data[1].id); //返回选中的json数据
                }
            });

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $('.num-span').each(function(){
                $(this).text($(this).parent().next('ul').children().length);
            });

            $('.h3-title').each(function () {
                var that= this
                if($(that).text().trim()=='我的同事'){
                    $(that).parent().addClass('active');
                    $('.center-list').html($(that).parent().next('ul').html());
                }
            });
            $('.icon-qizi').prev('.sec-name').css('color','#F46555')
            $('.title-list').click(function () {
                $(this).parents().find('.title-list').removeClass('active');
                $(this).addClass('active');
                $('.center-list').html($(this).next('ul').html());
            })

            $('body').on('click','.h3-title',function () {
                $(this).addClass('active');
                $('.center-list').html($(this).next('.hidden-tag').html());
            })
            $('body').on('click','.list-btn',function(){
                $(this).toggleClass('active')
                $(this).next('.hidden-div').toggle();
                $(this).find('.cir-angle').toggle();

            })
            //删除，ajax
            $('body').on('click','.button-shanchu3',function(){
                var that=this;
                layer.confirm('删除该项目和项目下分值？', {
                    btn : [ '确定', '取消' ]//按钮
                }, function(index) {
                    var  dataId=$(that).parent().parent().attr('data-id');
                    if(dataId){
                        ajax_achievement_delete($(that).parent().parent().attr('data-id'));
                        $(that).parent().parent().remove();
                    }else{
                        $(that).parent().parent().remove();
                    }
                    layer.close(index);
                });
            })
            // 添加,ajax
            $('body').on('click','.create-item',function(){
                var that = this;
                $(that).parent().append('<div class="childern-div" data-id="">'
                            +'<div class="line-p">'
                                +'<p>项目名</p>'
                                +'<input type="text"  class="name" value="">'
                            +'</div>'
                            +'<div class="line-p">'
                            +'<p>标签：</p>'
                            +'<select class="title-namep">'
                                +$('.title-name').html()
                            +'</select>'
                            +'</div>'
                            +'<div class="standard-p">'
                                +'<p>标准值</p>'
                                +'<input type="tel"  class="standard" value="100">'
                            +'</div>'
                            +'<div class="standard-p finish-p">'
                                +'<p>完成值</p>'
                                +'<input type="tel" class="score" value="0"  class="score">'
                            +'</div>'
                            +'<div class="button-g">'
                                +'<button class="button-shanchu3">删除</button>'
                                +'<button class="button-queding">确定</button>'
                            +'</div>'
                        +'</div>');

            })
            //确定，提交信息取input信息，ajax
            $('body').on('click','.button-queding',function(){
                var name=$(this).parent().parent().find('.name').val();
                var standard=$(this).parent().parent().find('.standard').val();
                var score=$(this).parent().parent().find('.score').val();
                var id=$(this).parent().parent().attr('data-id');
                var user_id=$(this).parent().parent().parent().find(".user_id").val();
                var tip = $(this).parent().parent().find(".title-namep").val();
                if (name == '') {
                    layer.msg("请填写项目名！", {icon: 2});
                } else if (name.length > 12) {
                    layer.msg("项目名请在12字以内！", {icon: 2});
                } else {
                    if(id){
                        ajax_achievement_update(score,standard,user_id,id,$(this).parent().parent())
                    }else {
                        ajax_achievement_create(name,standard,score,user_id,$(this).parent().parent(),tip);
                    }
                }
            });

            //标签添加修改
            $('body').on('click','.tip-btn',function () {
                $('.hidden-sec').css('display','block');
                $('.shadow-hidden').css('display','block');
            });

            //确定，提交信息取input信息，ajax
            $('body').on('click','.sub-mit',function () {
                name=$('.text-input').val()
                if(name.length>8){
                    layer.msg('标签名请在8个字以内！');
                }else{
                    var url='/admin/tips';
                    $.ajax({
                        type: 'post',
                        cache: 'false',
                        url: url,
                        data: 'name=' + name,
                        dataType: 'json',
                        success: function (data) {
                            if (data.status == 'success') {
                                $('.tip-list').append('<li style="background: '+data.data.color+'">' +
                                        '<span></span>' +
                                        name +
                                        '<i class="icon iconfont icon-chahao"></i>' +
                                        '</li>');
                                $('.hidden-sec').css('display','none');
                                $('.shadow-hidden').css('display','none');

                            } else {
                                layer.msg(data.msg, {icon: 5});
                            }
                        },
                        error: function () {
                            layer.msg('网络异常请重试', {icon: 5});
                        }
                    });
                }
            })
            //删除，提交信息取input信息，ajax
            $('body').on('click','.icon-chahao',function(){
                var that=this;
                t_id=that.id;
                layer.confirm('确认删除该标签？', {
                    btn : [ '确定', '取消' ]//按钮
                }, function(index) {
                    var url='/admin/tips/'+t_id;
                    $.ajax({
                        type: 'DELETE',
                        cache: 'false',
                        url: url,
                        dataType: 'json',
                        success: function (data) {
                            if (data.status == 'success') {
                                $(that).parent().remove();

                            } else {
                                layer.msg(data.msg, {icon: 5});
                            }
                        },
                        error: function () {
                            layer.msg('网络异常请重试', {icon: 5});
                        }
                    });
                    layer.close(index);
                });
            });
            $('.hidden-sec .popup i').click(function () {
                $('.hidden-sec').css('display','none');
                $('.shadow-hidden').css('display','none');
            })

            function ajax_achievement_create(name,standard,score,user_id,dom,tip) {
                var url='/admin/achievement';
                $.ajax({
                    type: 'post',
                    cache: 'false',
                    url: url,
                    data: 'name=' + name + '&standard=' + standard+ '&score=' + score+ '&user_id=' + user_id+ '&time=' + time+ '&tip=' + tip,
                    dataType: 'json',
                    success: function (data) {
                        if (data.status == 'success') {
                            layer.msg(data.msg, {icon: 1});
                            dom.attr('data-id',data.data.id);
                            window.location.reload();
                        } else {
                            layer.msg(data.msg, {icon: 2});
                            setTimeout(function(){ window.location.href= data.redirectUrl;}, 1000);
                        }
                    },
                    error: function () {
                        layer.msg('网络异常请重试', {icon: 2});
                    }
                });
            }

            function ajax_achievement_update(score,standard,user_id,id,dom) {
                var url='/admin/achievement/'+id;
                $.ajax({
                    type: 'put',
                    cache: 'false',
                    url: url,
                    data: 'id=' + id +'&score=' + score+ '&user_id=' + user_id+ '&standard=' + standard,
                    dataType: 'json',
                    success: function (data) {
                        if (data.status == 'success') {
                            layer.msg(data.msg, {icon: 1});
                            setTimeout(function(){  dom.find('i').removeClass("sure"); }, 3000);
                        } else {
                            layer.msg(data.msg, {icon: 2});
                            setTimeout(function(){ window.location.href= data.redirectUrl;}, 1000);
//                            window.location.href= data.redirectUrl;
                        }
                    },
                    error: function () {
                        layer.msg('网络异常请重试', {icon: 2});
                    }
                });
            }

            function ajax_achievement_delete(id) {
                var url='/admin/achievement/'+id;
                $.ajax({
                    type: 'delete',
                    cache: 'false',
                    url: url,
                    dataType: 'json',
                    success: function (data) {
                        if (data.status == 'success') {
                            layer.msg(data.msg, {icon: 6});
                        } else {
                            layer.msg(data.msg, {icon: 5});
                            setTimeout(function(){ window.location.href= data.redirectUrl;}, 1000);
//                            window.location.href= data.redirectUrl;
                        }
                    },
                    error: function () {
                        layer.msg('网络异常请重试', {icon: 5});
                    }
                });
            }
        })
    </script>
@endsection
